<template>
	<view class="member">
		<!-- 顶部导航 -->
		<diyNavBar value='会员等级' color='#FF6F30'></diyNavBar>
		<!-- 顶部 -->
		<view class="top">
			<view class="t-info">
				您当前等级为{{member.levelname}}
			</view>
		</view>
		<!-- member会员 -->
		<view class="member-content" >
			<view v-for="(item,index) in getList" :key="index" >
				<view class="mc-item mc-item2" @click="selectIndex = index">
					<view class="mc-content">
						<view class="left">
							<text class="l-top">{{item.title}}</text>
							<text class="l-bottom"></text>
						</view>
						<text class="iconfont icon-xiala"></text>
					</view>
					<image src="../../static/img/02.png" mode="aspectFill" v-if="index == 0"></image>
					<image src="../../static/img/03.png" mode="aspectFill" v-if="index == 1"></image>
					<image src="../../static/img/01.png" mode="aspectFill" v-if="index == 2"></image>
				</view>
				<view class="info-click" v-if="selectIndex == index">
					<text class="info-txt">{{item.context}}</text>
					<button class="button-info" type="primary" @tap="$util.redirectTo('/pages/myservice/myservice')">联系客服操作</button>
				</view>
			</view>
		</view>
		
		<!-- 支付弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="payment-box">
				<view class="item" v-for="(item,index) in paymenttype" :key="index" @click="paymentindex = index">
					<view class="item-left">
						<text class="iconfont" :class="item.icon"></text>
						{{item.name}}
					</view>
					<view class="right" v-if="paymentindex == index">
						<view class="center"></view>
					</view>
				</view>
				<button class="close" @click="btn">确定</button>
			</view>
		</uni-popup>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyNavBar,
			loadingCover
		},
		data() {
			return {
				//轮播图参数
				options: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					initialSlide: 0,
					coverflowEffect: {
						rotate: 0,
						stretch: -30,
						depth: 200,
						modifier: 1,
						slideShadows: true,
					},
				},
				privilegeList: [{
					name: '高佣金'
				}, {
					name: '任务刷新'
				}, {
					name: '专属客服'
				}],
				getList: [], //会员数据
				swiperIndex: 0, //当前指示点所在位置
				paymenttype: [], //支付方式
				paymentindex: 0, //支付方式选中
				judge: false,
				member: {},
				code: '',
				selectIndex:0
			}
		},
		onShow() {
			this.getdata()
			let url = window.location.href;
			const code = this.getParam('code');
			if (code) {
				this.code = code
				this.swiperIndex = this.getParam('state');
				setTimeout(() => {
					this.btn();
				}, 500)
			}
		},
		methods: {
			getParam(name) {
				var search = document.location.search;
				//alert(search);
				var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
				var matcher = pattern.exec(search);
				var items = null;
				if (null != matcher) {
					try {
						items = decodeURIComponent(decodeURIComponent(matcher[1]));
					} catch (e) {
						try {
							items = decodeURIComponent(matcher[1]);
						} catch (e) {
							items = matcher[1];
						}
					}
				}
				return items;
			},
			//监听swiper
			onChange(swiper, index) {
				this.swiperIndex = index;
			},
			// 开通
			btn() {
				// console.log('this.getList[this.swiperIndex].id',this.getList[this.swiperIndex].id)
				// return false;
				if (this.judge) return false;
				this.judge = true;
				if (this.paymenttype[this.paymentindex].id == 1) {
					if (!this.code) {
						let appid = 'wx55344008a4bd2b3d';
						let redirect_uri = encodeURIComponent('http://rwxt.diruankeji.com/h5/pages/recharge/recharge');
						let url =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(this.money)}#wechat_redirect&money=${this.money}`;
						location.href = url;
						return;
					}
				}
				let data = {
					pay_type: this.paymenttype[this.paymentindex].id,
					price: this.getList[this.swiperIndex].price,
					id: this.getList[this.swiperIndex].id
				}
				if (this.code) {
					data.code = this.code
				}
				this.$http.sendrequest('/recharge/Czmember', data, {
					tokenJudge: true
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.judge = false;
					if (res.code == 1) {
						switch (this.paymentindex) {
							case 5:
								location.href = res.data.pay
								break;
							default:
								// #ifdef APP
								plus.runtime.openURL(res.data.pay);
								// #endif

								// #ifdef H5
								if (this.paymenttype[this.paymentindex].id == '1') {
									let that = this;
									this.$wx.wxpay({
										// appid:'wxc7b3963c960324ca',
										timeStamp: res.data.pay.timeStamp,
										nonceStr: res.data.pay.nonceStr, // 支付签名随机串，不长于 32 位
										package: res.data.pay.package,
										signType: res.data.pay.signType,
										paySign: res.data.pay.paySign, // 支付签名
									}, function(r) {
										// 支付成功后的回调函数
										if(r.errMsg==='chooseWXPay:ok'){
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												success() {
													that.$util.redirectTo('/pages/personal/personal',{},'switchTab');
												}
											})
										}else if(r.errMsg==='chooseWXPay:cancel'){
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												success() {
													that.$util.redirectTo('/pages/personal/personal',{},'switchTab');
												}
											})
										}
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									const div = document.createElement('div')
									div.innerHTML = res.data.pay;
									document.body.appendChild(div)
									if (document.getElementById('alipay_submit')) {
										document.getElementById('alipay_submit').submit()
									} else if (document.getElementById('pay_form')) {
										document.getElementById('pay_form').submit()
									}
								}
								// #endif
						}
						this.$refs.popup.close();
					}
				})
			},
			//支付方式/会员列表
			getdata() {
				this.$http.sendrequest('/member/MemberLevelList', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.getList = res.data
					}
				})
				this.$http.sendrequest('/member/memberId', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.member = res.data
					}
				})
				this.$http.sendrequest('/payment/PaymentList').then(res => {
					if (res.code == 1) {
						this.paymenttype = res.data;
						this.paymenttype.forEach(item => {
							switch (item.name) {
								case '微信':
									item.icon = 'icon-weixin'
									break;
								case '支付宝':
									item.icon = 'icon-zhifubao'
									break;
							}
						})
						this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.top{
		height: 192rpx;
		background: #FF6F30;
		font-family: PingFang SC;
		box-sizing: border-box;
		padding-top: 30rpx;
		.t-info{
			width: 672rpx;
			height: 50rpx;
			background:rgba(255,255,255,.2) ;
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 0 40rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.member-content{
		margin: -72rpx 33rpx;
		.mc-item{
			width: 100%;
			height: 160rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.mc-content{
				width: 60%;
				margin-left: 200rpx;
				height: 80%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 0;
				left:0;
				height: 100%;
				z-index: 99;
				.left{
					display: flex;
					flex-direction: column;
					.l-top{
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-bottom: 20rpx;
					}
					.l-bottom{
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.icon-xiala{
					font-size: 46rpx;
					color: #FFFFFF;
				}
			}
		}
		.mc-item1{
			background-image: url('../../static/img/02.png') !important;
		}
		.mc-item2{
			background-image: url('../../static/img/03.png') !important;
		}
		.mc-item3{
			background-image: url('../../static/img/01.png') !important;
		}
		.info-click{
			margin: -10rpx 10rpx 10rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(206,206,206,0.8);
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			.info-txt{
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
			.button-info{
				max-width: 230rpx;
				height: 50rpx;
				background: #FF6F30;
				border-radius: 25rpx;
				margin: 0;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
	
	.payment-box {
		width: 650rpx;
		min-height: 360rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
	
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, .04);
	
			.right {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 2rpx solid $uni-tabbar-hovercolor;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.center {
					background: $uni-tabbar-hovercolor;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
				}
			}
	
			.item-left {
				font-size: 28rpx;
				display: flex;
				align-items: center;
	
				.iconfont {
					font-size: 60rpx;
					margin-right: 30rpx;
				}
			}
		}
	
		.close {
			text-align: center;
			margin-top: 50rpx;
			font-size: 34rpx;
			background: $uni-tabbar-hovercolor;
			color: #FFFFFF;
			border-radius: 90rpx;
			height: 90rpx;
		}
	}
	
	.icon-zhifubao {
		color: #22ABFF !important;
	}
	
	.icon-weixin {
		color: #34C758 !important;
	}
</style>
